<template>
  <div class="section">
    <div class="header">
      <!-- <img src="../assets/back.png" alt @click="goback" /> -->
      <p>支付成功</p>
    </div>
    <div class="content">
      <p class="successImg">
        <img src="../assets/success.png" alt />
      </p>
      <p class="payMessage">购买成功!</p>
      <div class="orderMessage">
        <p v-if="out_trade_no">订单编号：{{out_trade_no}}</p>
        <p>交易方式：微信支付</p>
        <p>下单时间：{{orderTime|formatDate}}</p>
      </div>
    </div>
    <p class="line" v-if="showOrHide"></p>
    <div class="btnArea" v-if="showOrHide">
      <button @click="gobackHome">返回美学频道</button>
    </div>
  </div>
</template>

<script>
import Cookies from 'js-cookie'
import { formatDate } from '../js/format.js'
import getUrlParams from '../js/getUrlParams.js'
export default {
  data() {
    return {
      showOrHide: false,
      out_trade_no: '',
      orderTime: ''
    }
  },
  // 时间戳过滤
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm:ss');
    }
  },
  created() {
    this.out_trade_no = Cookies.set('out_trade_no')
    this.orderTime = new Date();
    console.log(this.orderTime);
    this.iosAndAndroid();
  },
  methods: {
    //  判断ios还是Android，显示和隐藏按钮
    iosAndAndroid() {
      var ua = window.navigator.userAgent,
        app = window.navigator.appVersion;
      if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        // ios端 
        console.log('ios');
        this.showOrHide = false;
      } else if (ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1) {
        // android端 
        console.log('android端');
        this.showOrHide = false;
      }
    },
    gobackHome() {
      window.location.href = 'appLXYdushuhui://';
    }
  }
}
</script>

<style scoped>
.header {
  position: relative;
  box-sizing: border-box;
  padding: 12px;
  border-bottom: 1px solid #eeeeee;
}

.header img {
  position: absolute;
  left: 12px;
  top: 16px;
  width: 11px;
  height: 19px;
  vertical-align: middle;
}

.header p {
  font-size: 18px;
  font-weight: bold;
}

.content {
  width: 100%;
  box-sizing: border-box;
  margin: 0 auto;
  margin-top: 32px;
  margin-bottom: 20px;
}

.content .successImg {
  width: 175px;
  height: 175px;
  margin: 0 auto;
}

.content .successImg img {
  width: 100%;
}

.content .payMessage {
  text-align: center;
  font-size: 21px;
  color: #a87631;
  font-weight: 400;
  margin: 12px auto;
}

.content .orderMessage {
  width: 72%;
  margin: 0 auto;
}

.content .orderMessage p {
  color: #484848;
  font-size: 14px;
  font-weight: 400;
  text-align: left;
}

.line {
  height: 10px;
  background: #e8e8e8;
  box-sizing: border-box;
}

.btnArea {
  box-sizing: border-box;
  width: 80%;
  margin: 0 auto;
  padding: 70px 0;
}

.btnArea button {
  width: 100%;
  outline: none;
  border: none;
  background: linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  background: -webkit-linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  background: -o-linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  background: -moz-linear-gradient(
    263deg,
    rgba(151, 100, 38, 1) 0%,
    rgba(175, 125, 54, 1) 100%
  );
  border-radius: 26px;
  font-size: 18px;
  font-weight: 400;
  color: #faedd2;
  padding: 8px 0;
}
</style>